<template>
    <div class="user-detail">
        <div class="info-item">
            <normal-title title="基本信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">用户名</span>:
                    <div class="cont">
                        {{formData.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        <span >{{formData.phone || ''}}</span>
                        <el-input v-if="false" placeholder="请输入手机号码"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">用户状态</span>:
                    <div class="cont">
                        {{formData.statusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">创建时间</span>:
                    <div class="cont">
                        {{formData.createTime  && $normalTime(formData.createTime)}}
                    </div>
                </div>
                <div class="form-item" v-if="formData.loginTime">
                    <span class="label">最后登录时间</span>:
                    <div class="cont">
                        {{formData.loginTime  && $normalTime(formData.loginTime)}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">用户组</span>:
                    <div class="cont">
                        <span>
                            {{formData.group && formData.group.name || ''}}
                        </span>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">角色</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{formData.role && formData.role.name || ''}}</span>
                        <el-select v-else v-model="forms.role.id">
                            <el-option v-for="(item, i) in roleList" :key="i" :value="item.id" :label="item.name"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="form-item" v-if="isEditer">
                    <span class="label">密码</span>:
                    <div class="cont">
                        <el-input placeholder="请输入密码" type="password" v-model.trim="forms.password"></el-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item"  v-if="formData.salesCompany && formData.salesCompany.id">
            <normal-title title="卖家信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">卖家名称</span>:
                    <div class="cont">
                        {{formData.salesCompany.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        {{formData.salesCompany.mobile || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">联系人</span>:
                    <div class="cont">
                        {{formData.salesCompany.contacts || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">组织机构代码</span>:
                    <div class="cont">
                        {{formData.salesCompany.organizingCode || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开店审核状态</span>:
                    <div class="cont">
                        {{formData.salesCompany.olineStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">是否开户</span>:
                    <div class="cont">
                        {{formData.salesCompany.openAccountStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">绑卡状态</span>:
                    <div class="cont">
                        {{formData.salesCompany.bindBankStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">所属地区</span>:
                    <div class="cont">
                        {{formData.salesCompany.province && formData.salesCompany.province.name  || ''}}{{formData.salesCompany.city && formData.salesCompany.city.spell  || ''}}{{formData.salesCompany.area && formData.salesCompany.area.name  || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">注册来源</span>:
                    <div class="cont">
                        {{formData.salesCompany.sourceMessage || ''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="control">
            <el-button type="primary" v-if="!isEditer" @click="isEditer = true">编辑</el-button>
            <template v-else>
                <el-button @click="isEditer = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    name: 'userDetail',
    data () {
        return {
            forms: {
                password: '',
                role: {
                    id: ''
                },
            },
            formData: {},
            isEditer: false,
            roleList: []
        }
    },
    created () {
        this.getMsg()
    },
    methods: {
        getMsg () {
            let param = {}
            param = {
                id: this.$route.params.id || ''
            }
            this.$loading(true)
            this.$api.userManage.getUserDetail(param).then(r => {
                this.formData = r.data || {}
                if (!this.forms.role) {
                    this.forms.role = {id: ''}
                }
                this.forms.role.id = r.data && r.data.role && r.data.role.id || ''
                console.log(r.data)
                this.getRoleList(r.data.group.id || '')
            })
            this.$loading(false)
        },
        // 获取角色列表
        getRoleList (groupId) {
            let param = {}
            param = {
                groupId,
                store: 1
            }
            this.$api.common.getRoleAllList(param).then(r => {
                this.roleList = r.data || []
            })
        },
        // 保存
        save () {
            const {forms: {password, role: {id}}, formData: {group}} = this
            if (password) {
                if (password.length < 6) {
                    this.$message.error('密码长度不得小于6位')
                    return
                }
            }
            let param = {}
            param = {
                group: {
                    id:group.id
                },
                role: {
                    id
                }
            }
            if (password) param.password = password
            this.$loading(true)
            this.$api.userManage.putUpdateUser(param).then(r => {
                this.$message.success('保存成功')
            }).finally(() => {
                this.$loading(false)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.user-detail {
    .info-item {
        background: #fff;
        padding: 10px 10px 0;
        .form-box {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            margin-bottom: 16px;
            .form-item {
                display: flex;
                margin-bottom: 10px;
                min-height: 36px;
                align-items: center;
                font-size: 14px;
                color: #333;
                .label {
                    width: 100px;
                    text-align-last: justify;
                    color: #666;
                }
                .cont {
                    flex: 1;
                    margin-left: 10px;
                    .el-input {
                        width: 300px;
                    }
                    .el-select {
                        width: 300px;
                    }
                }
            }
        }
    }
    .control {
        padding: 0 0 16px;
    }
}
</style>